import React,{Component, Fragment} from 'react' ; 
import { Checkbox } from 'antd'
import PropTypes from "prop-types";
import {connect} from 'react-redux';
import action from 'store/action/menuPer.js'


const CheckboxGroup = Checkbox.Group;
class CheckBoxAll extends Component {
    constructor(props){
        super(props)
        this.state={
            plainOptions:[],//配置项
            defaultCheckedList:[],//配置项处理出的
            indeterminate:false,
            checkAll:false,
            checkedList:[], //这是最终选择的 
           checked_list_json:{} // 和redux交互的菜单权限数据 
        }
    }
    // 交互的数据数据格式
    /* 
        {
            user:{
                '/user/list':{
                    label:'用户列表',
                    value:'/user/list'
                }
            },
            xx:{ }
        }
    */
    onChange = list => {
        const {plainOptions} = this.state 
        this.setState({
            checkedList:list,
            indeterminate:!!list.length && list.length < plainOptions.length,
            checkAll:list.length === plainOptions.length
        },()=>this.setMenuRedux())
      };
    onCheckAllChange = e => { //全选按钮 
        const {defaultCheckedList} = this.state 
        const checkedList = e.target.checked ? defaultCheckedList : []
        this.setState({
            checkedList:checkedList,
            indeterminate:false,
            checkAll:e.target.checked
        },()=>{
            this.setMenuRedux()
        })
    };

    setMenuRedux(){
        const {checkedList,checkAll,indeterminate} = this.state
        const {roleData,role_menu,setRoleMenu} = this.props
        const data = { }
        // 添加
        let roleMenu = role_menu
            if(!roleMenu[roleData.value]){roleMenu[roleData.value]={}}
        // 第二层属性和值
        checkedList.length>0&&checkedList.forEach(item=>{
           data[item] = roleData.child_item.filter(i=>i.value===item)[0]
        })
        roleMenu[roleData.value] = data
        // 删除
        if(!checkAll&&!indeterminate){
            if(roleMenu[roleData.value]){delete roleMenu[roleData.value]}
        }
        setRoleMenu(roleMenu)
    }

    UNSAFE_componentWillMount(){
        const {child_item} = this.props.roleData
        const defaultCheckedList=  child_item&&child_item.length>0&&child_item.map(item=>item.value)
        this.setState({plainOptions:child_item,defaultCheckedList:defaultCheckedList})
    }

    render(h) {
        const {plainOptions,checkedList,indeterminate,checkAll}= this.state
        const {label } = this.props.roleData && this.props.roleData
    return (
        <Fragment>
        <Checkbox indeterminate={indeterminate} onChange={this.onCheckAllChange} checked={checkAll}>
                {label}
            </Checkbox>
            <br/> <br/>
            <CheckboxGroup options={plainOptions} value={checkedList} onChange={this.onChange} />
            <br/><br/>
    </Fragment>
    )
    }
}
    // 接受参数 
    CheckBoxAll.propType={
        roleData:PropTypes.object
    }
    CheckBoxAll.defaultProps={
        roleData:{} //{label: "名字", value: "/user", child_item: Array(2)}
    }


export default connect(state=>({...state.menu}),action)(CheckBoxAll) 